<template>
    <div class="pubManage">
        <h2>通知管理</h2>
        <div class="operatingBox">
            <el-button type="info" icon="el-icon-arrow-left" size="small" @click="goBackNo">返回</el-button>
        </div>
        <div class="formBox">
            <!-- <el-button type="info" size="small" icon="el-icon-arrow-left" @click="backToPrev">
                                            返回</el-button> -->
            <el-form size="small" class="addForm">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">类型</span>
                            </span>
                            <el-select v-model="value1" placeholder="请选择" style="width: 100%;">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">开始日期</span>
                            </span>
                            <el-input></el-input>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">标题</span>
                            </span>
                            <el-input></el-input>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">描述</span>
                            </span>
                            <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" placeholder="请输入内容"
                                v-model="textarea"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">状态</span>
                            </span>
                            <el-select v-model="value2" placeholder="请选择" style="width: 100%;">
                                <el-option v-for="item in options2" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">结束日期</span>
                            </span>
                            <el-input class="put">

                            </el-input>

                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">链接</span>
                            </span>
                            <el-input></el-input>
                        </el-form-item>
                        <el-form-item class="topBox">
                            <span slot="label">
                                <span class="labelText">置顶</span>
                            </span>
                            <input type="checkbox" v-model="checked" name="" id="" style="width: 20px;height: 20px;">
                        </el-form-item>
                    </el-col>
                </el-row>
                <hr>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-input></el-input>
                    </el-col>
                    <el-col :span="4">
                        <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                            :on-change="handleChange" :file-list="fileList">
                            <el-button size="small" icon="el-icon-paperclip" class="attBtn">增加附件</el-button>
                            <div slot="tip" class="el-upload__tip">5M以内</div>
                        </el-upload>
                    </el-col>
                </el-row>
                <el-form-item class="subBtn">
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button type="info" size="small">取消</el-button>
                </el-form-item>
            </el-form>

        </div>

</div>
</template>

<script>
export default {
    name: 'AddNotice',

    data() {
        return {
            textarea: "",//描述框的输入内容
            checked: false,//置顶多选框是否勾选
            //类型下拉框的值
            options1: [
                {
                    value: "选项1",
                    label: "公告"
                },
                {
                    value: "选项2",
                    label: "通知"
                },
                {
                    value: "选项3",
                    label: "投票"
                },

            ],
            value1:"",//下拉框被选中的值

            //状态下拉框的值
            options2: [

                {
                    value: "选项1",
                    label: "一般"
                },
                {
                    value: "选项2",
                    label: "紧急"
                },
                {
                    value: "选项3",
                    label: "重要"
                },
            ],
            value2:"",

            //upload里的数据
            fileList: [
                {
                    name: "",
                    url: "",
                }
            ]
        };
    },

    mounted() {

    },

    methods: {
        goBackNo() {
            this.$router.push("/pubNotice/pubManage")
        },


        //upload 里的方法
        handleChange(file, fileList) {
            this.fileList = fileList.slice(-3);
        },



        //保存按钮
        onSubmit() {

        }
    },
};
</script>

<style scoped>
h2 {
    margin: 15px;

}

.operatingBox {
    background-color: white;
    margin: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 3px solid #ccc;
    border-radius: 5px;
}

.el-button {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

.formBox {
    background-color: white;
    margin-left: 15px;
    margin-right: 15px;

}

.el-form {
    margin: 15px;

}


.labelText {
    text-align: left;
    float: left;
    font-size: 14px;
    font-weight: 600;
    color: black;
}

.topBox {
    display: flex;
    flex-direction: column;

    align-items: flex-start;
}

hr {
    color: rgb(241, 238, 238);
}

.el-upload__tip {
    padding-left: 10px;
}

.attBtn {
    font-size: 15px;
    background-color: rgb(231, 227, 227);
}
</style>